<style>
.limit-len{
	text-overflow: ellipsis;
    overflow: hidden;
    max-width: 200px;
    white-space: nowrap;
    display: inline-block;
}
.chart-area{
	position: relative;
}
.chartName{
	position: absolute;
	top: 14px;
}
.result-tip{
	position: absolute;
	top: 115px;
	color: #cdcdcd;
}
</style>
<div class="content-byc image-content" ng-controller="DetailCtrl">
    <div class="animated update-content" ng-class="{true:'bounceInRight',false:'bounceOutRight'}[isActive]"
         ng-if="showDetail==1">
        <div class="wrapper-md">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default" style="padding:0;">
                        <div class="panel-heading font-bold" style="height: 40px;">
                            <div class="col-md-4 " >
                              	<span ng-bind="conInstanceCore.containerName" class="limit-len" title="{{conInstanceCore.containerName}}"></span>
                            </div>
                            <div class="col-md-8 ">
                                <label><input type="radio"  value='static' ng-checked='true' ng-model="datamodel"  ng-click="modelChange('static')" />过去一小时</label>&nbsp;&nbsp;&nbsp;
                                <label><input type="radio"  value="'auto'" ng-model="datamodel" ng-click="modelChange('auto')" />即时数据</label>
                                <button class="btn btn-info pull-right" style="margin-top: -7px;" ng-click="goBack()" tabindex="0">
                                    <i class="fa fa-reply icon-font"></i> 返回
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="col-md-12 hostdetail">
                                <div class="">
                                    <h5 class="console-title">基本信息</h5>
                                    <ul class="list-unstyled">
                                        <li ><span class="dfont">名称</span><span class="dfont-back" ng-bind="conInstanceCore.containerName"></span></li>
                                        <li ><span class="dfont">所在主机</span><span class="dfont-back" ng-bind="conInstanceCore.ip"></span></li>
                                        <li ><span class="dfont">状态</span><span class="dfont-back" ng-bind="conInstanceCore.containerStatus"></span></li>
                                        <li ><span class="dfont">镜像</span><span class="dfont-back" ng-bind="conInstanceCore.imageName"></span></li>
                                        <li ><span class="dfont">创建时间</span><span class="dfont-back" ng-bind="conInstanceCore.instanceCreateDatetime | date:'yyyy-MM-dd HH:mm:ss'"></span></li>
                                        <li ><span class="dfont">CPU</span><span class="dfont-back" ng-bind="conInstanceCore.instanceCpu"></span></li>
                                        <li ><span class="dfont">内存</span><span class="dfont-back" ng-bind="conInstanceCore.instanceMemory"></span></li>
                                        <li ><span class="dfont">网络</span><span class="dfont-back" ng-bind="conInstanceCore.instanceNetwork"></span></li>
                                        <li ><span class="dfont">IP</span><span class="dfont-back" ng-bind="conInstanceCore.hostIp"></span></li>
                                        <li >
                                            <span class="dfont">环境</span>
                                            <div style="display: inline-block;">
                                                <div ng-repeat="rowEnvList in conInstanceEnvsList">
                                                    <span class="dfont-back" ng-cloak>{{rowEnvList.instanceEnvsName}}&nbsp:&nbsp{{rowEnvList.instanceEnvsValue}}</span>
                                                </div>
                                            </div>
                                        </li>
                                        <li >
                                            <span class="dfont">端口</span>
                                            <div style="display: inline-block;">
                                                <div ng-repeat="rowPortList in conInstancePorts">
                                                    <span class="dfont-back" ng-bind="rowPortList.instancePortsPort"></span>-->
                                                    <span class="dfont-back" ng-bind="rowPortList.instancePortsNodePort"></span>
                                                </div>
                                            </div>
                                        </li>
                                        <li >
                                            <span class="dfont">硬盘卷</span>
                                            <div style="display: inline-block;">
                                                <div ng-repeat="rowVolList in conInstanceVolumesList">
                                                    <span class="dfont-back" ng-bind="rowVolList.instanceVolumesName"></span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                     	<div class="col-md-8">
	                        <div class="col-md-6">
                                <div class="chart-area">
                                    <span class="chartName">cpu监控(%)</span>
                                    <div id="img_cpu" style="height: 250px;" ng-show="!resultTip.cpu">
                                    </div>
                                    <div style="height:250px;" ng-show="resultTip.cpu">
                                    	<span class='result-tip'>无数据</span>
                                    </div>
                                </div>
                            	<div  class="chart-area">
                                    <span class="chartName">内存监控(%)</span>
                                    <div id="img_memery" style="height: 250px;" ng-show="!resultTip.mem">
                                    </div>
                                    <div style="height:250px;" ng-show="resultTip.mem">
                                    	<span class='result-tip'>无数据</span>
                                    </div>
                                </div>
	                        </div>
	                        <div class="col-md-6">
	                        	<div class="chart-area">
                                    <span class="chartName">入网监控(KB/s)</span>
                                    <div id="img_net" style="height: 250px;" ng-show="!resultTip.net">
                                    </div>
                                     <div style="height:250px;" ng-show="resultTip.net">
                                    	<span class='result-tip'>无数据</span>
                                    </div>
                                </div>
                                <div class="chart-area">
                                    <span class="chartName">出网监控(KB/s)</span>
                                    <div id="img_net_out" style="height: 250px;" ng-show="!resultTip.netOut">
                                    </div>
                                    <div style="height:250px;" ng-show="resultTip.netOut">
                                    	<span class='result-tip'>无数据</span>
                                    </div>
                                </div>
	                        </div>
                        </div>
                     </div>
                 </div>
             </div>
        </div>
    </div>
</div>